<template>
  <div class="interview-notice-container">
    <div class="header-actions">
      <router-link to="/main/biao">
        <el-button icon="el-icon-arrow-left">返回</el-button>
      </router-link>
      <div class="action-buttons">
        <el-button
          type="primary"
          v-if="!isView"
          @click="saveData"
          icon="el-icon-check"
          >保存</el-button
        >
        <el-button type="success" @click="goToList" icon="el-icon-menu"
          >列表</el-button
        >
        <!-- <el-button type="success" @click="printToPDF" icon="el-icon-printer">导出PDF</el-button> -->
        <el-button type="info" @click="printPage" icon="el-icon-printer"
          >打印</el-button
        >
      </div>
    </div>

    <div class="interview-notice">
      <h2 class="page-title">面试通知书</h2>
      <div class="notice-content">
        <p class="company-info">
          <input
            type="text"
            :style="{
              width: formData.companyName.length + 'ch',
              minWidth: '120px',
            }"
            v-model="formData.companyName"
            :disabled="isView"
            placeholder="请输入公司名称"
          />
          公司
        </p>
        <p class="date-info">
          日期：<input type="date" v-model="formData.date" :disabled="isView" />
        </p>
        <p>
          尊敬的
          <input
            :style="{ width: formData.name.length + 'ch', minWidth: '80px' }"
            type="text"
            v-model="formData.name"
            :disabled="isView"
            placeholder="请输入姓名"
          />
          先生/小姐：
        </p>
        <p>您好！</p>
        <p>
          经过初步筛选和评估，我们很高兴地通知您，您的简历及申请材料在
          <input
            type="text"
            v-model="formData.position"
            :disabled="isView"
            :style="{
              width: formData.position.length + 'ch',
              minWidth: '100px',
            }"
            placeholder="请输入职位"
          />
          的职位招聘过程中表现突出，符合我们的职位要求。因此，我们诚挚地邀请您参加面试。
        </p>
        <p>面试详情如下：</p>
        <p class="interview-time">
          面试时间：<input
            type="date"
            v-model="formData.addTime"
            :disabled="isView"
            placeholder="请选择日期"
          />
          <input
            type="time"
            v-model="formData.startTime"
            :disabled="isView"
            class="time-input"
            step="1"
          />
          至
          <input
            type="time"
            v-model="formData.endTime"
            :disabled="isView"
            class="time-input"
            step="1"
          />
        </p>
        <p class="interview-location">
          面试地点：深圳市宝安区沙井街道和一村兴业西路裕达富工业园，我们将提供会议室的
          <input
            type="text"
            v-model="formData.floor"
            :disabled="isView"
            placeholder="楼层"
          />
          楼
          <input
            type="text"
            v-model="formData.roomNumber"
            :disabled="isView"
            placeholder="房间号"
          />
          号。
        </p>
        <p>
          面试形式：<input
            type="text"
            v-model="formData.interviewForm"
            :disabled="isView"
            placeholder="请输入面试形式"
          />
        </p>
        <div class="notice-section">
          <p>
            面试流程：面试将包括自我介绍、专业技能测试、案例分析(如适用)、HR面谈等环节。具体流程安排将在面试前通过邮件形式再次与您确认。
          </p>
          <p>
            需携带材料：请携带个人简历、身份证、学历证书、相关资格证书原件及复印件，以及任何能体现您专业技能或成就的作品或项目资料。
          </p>
        </div>
        <div class="notice-section">
          <p class="section-title">注意事项：</p>
          <p>
            1.
            请确保您能在面试前10分钟到达面试地点或准备好视频会议环境，以便我们有足够的时间进行签到和准备。
          </p>
          <p>
            2. 如因特殊原因无法参加此次面试，请至少提前
            <input
              type="text"
              v-model="formData.noticeTime"
              :disabled="isView"
              placeholder="请输入时间"
            />
            通过电话：<span class="highlight">0755-33866888</span>
            与我们联系，以便我们安排其他面试时间。
          </p>
          <p>
            3.
            我们将对您的个人信息保密，面试过程中收集的所有资料仅用于招聘目的。
          </p>
        </div>
        <p class="notice-footer">
          我们非常期待您的会面，相信您的加入将为我们的团队带来新的活力与创意。请准备好分享您的经验和见解同时也准备好了解我们公司的文化、价值观以及该职位的具体职责和要求。
        </p>
        <p>
          如有任何疑问或需要进一步的信息，请随时通过
          <span class="highlight">0755-33866888</span> 与我们联系。
        </p>
        <p>
          再次感谢您对
          {{ formData.companyName }} 公司的关注与信任，期待在面试中见到您！
        </p>
        <p class="closing-text">此致&nbsp;&nbsp;&nbsp;</p>
        <p class="closing-text">敬礼！</p>
        <div class="form-info">
          <span>表单编号及版本：AM-JY-000 A/3</span>
          <span>保存期限：长期</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInterviewNoticeDetail, saveInterviewNotice } from "@/api/interview";
import html2pdf from "html2pdf.js";
import { formatDate, formatTime } from "@/utils/date";

export default {
  data() {
    return {
      formData: {
        id: null,
        companyName: "",
        date: "",
        name: "",
        position: "",
        startTime: "00:00:00",
        addTime: "",
        endTime: "00:00:00",
        floor: "",
        roomNumber: "",
        interviewForm: "",
        noticeTime: "",
      },
      rules: {
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入候选人姓名", trigger: "blur" },
        ],
        position: [
          { required: true, message: "请输入应聘职位", trigger: "blur" },
        ],
        addTime: [
          { required: true, message: "请选择面试日期", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        interviewForm: [
          { required: true, message: "请输入面试形式", trigger: "blur" },
        ],
      },
      isView: false,
    };
  },
  created() {
    const { id, type } = this.$route.query;
    if (id) {
      this.formData.id = id;
      this.getDetail();
    }
    console.log("type22", type);
    this.isView = type === "view";
    console.log("this.isView", this.isView);
    if (!this.formData.date) {
      this.formData.date = formatDate(new Date());
    }
  },
  methods: {
    async getDetail() {
      try {
        const resData = await getInterviewNoticeDetail(this.formData.id);
        const res = resData.data;
        this.formData = {
          ...this.formData,
          companyName: res.companyName,
          date: formatDate(res.noticeDate),
          name: res.candidateName,
          position: res.position,
          addTime: formatDate(res.interviewDate),
          startTime: res.startTime || "00:00:00",
          endTime: res.endTime || "00:00:00",
          floor: res.floorNum,
          roomNumber: res.roomNum,
          interviewForm: res.interviewForm,
          noticeTime: res.noticeTime,
          id: res.id,
        };
      } catch (error) {
        console.error("获取详情失败：", error);
      }
    },
    async saveData() {
      try {
        // const valid = await this.$refs.form.validate()
        // if (!valid) {
        // return
        // }

        const params = {
          ...this.formData,
          noticeDate: this.formData.date,
          interviewDate: this.formData.addTime,
          startTime: this.formData.startTime,
          endTime: this.formData.endTime,
          candidateName: this.formData.name,
          floorNum: this.formData.floor,
          roomNum: this.formData.roomNumber,
        };

        // 删除多余的字段
        delete params.date;
        delete params.addTime;
        delete params.name;
        delete params.floor;
        delete params.roomNumber;

        await saveInterviewNotice(params);
        this.$message.success("保存成功");
        this.$router.push("/main/renshi/zhaoping/mianshitzs/mianshitzsList");
      } catch (error) {
        console.error("保存失败：", error);
        this.$message.error("保存失败：" + error.message);
      }
    },
    printToPDF() {
      const element = document.querySelector(".interview-notice");
      const opt = {
        margin: [10, 10],
        filename: "面试通知单.pdf",
        image: { type: "jpeg", quality: 0.98 },
        html2canvas: {
          scale: 2,
          useCORS: true,
          letterRendering: true,
        },
        jsPDF: {
          unit: "mm",
          format: "a4",
          orientation: "portrait",
        },
      };
      html2pdf().set(opt).from(element).save();
    },
    printPage() {
      window.print();
    },
    goToList() {
      this.$router.push("/main/renshi/zhaoping/mianshitzs/mianshitzsList");
    },
  },
};
</script>

<style lang="scss" scoped>
.interview-notice-container {
  padding: 16px;
  // background-color: #f5f7fa;
  min-height: calc(100vh - 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    width: 220mm;

    .action-buttons {
      display: flex;
      gap: 8px;
    }

    .el-button {
      padding: 8px 16px;
      height: 32px;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .interview-notice {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
    max-width: 800px;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .page-title {
      text-align: center;
      color: #2c3e50;
      font-size: 1.2em;
      font-weight: 600;
      margin-bottom: 24px;
      position: relative;
      padding-bottom: 12px;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #409eff, #53a8ff);
        border-radius: 3px;
      }
    }

    .notice-content {
      font-size: 1em;
      line-height: 2;
      color: #606266;
      text-align: left;

      p {
        margin: 12px 0;
        text-indent: 2em;
      }

      .closing-text {
        text-align: right;
        padding-right: 2em;
        text-indent: 0;
      }

      input {
        border: none;
        border-bottom: 1px solid #dcdfe6;
        padding: 4px 8px;
        font-size: inherit;
        color: inherit;
        background: transparent;
        transition: all 0.3s ease;
        min-width: 80px;

        &:hover,
        &:focus {
          border-color: #409eff;
          outline: none;
        }

        &::placeholder {
          color: #c0c4cc;
        }

        &[type="date"],
        &[type="time"] {
          min-width: 80px;
        }
      }

      .notice-section {
        margin: 16px 0;
        padding: 16px;
        background: #f8f9fa;
        border-radius: 4px;

        .section-title {
          font-weight: 500;
          color: #2c3e50;
          margin-bottom: 8px;
        }
      }

      .highlight {
        color: #409eff;
        text-decoration: underline;
        font-weight: 500;
      }

      .notice-footer {
        margin: 24px 0;
        line-height: 1.8;
      }
    }

    .form-info {
      display: flex;
      justify-content: space-between;
      padding: 16px 0 0;
      margin-top: 24px;
      border-top: 1px solid #ebeef5;
      color: #909399;
      font-size: 13px;
    }
  }
}

@media screen and (max-width: 768px) {
  .interview-notice-container {
    padding: 12px;

    .interview-notice {
      padding: 16px;

      .page-title {
        font-size: 20px;
        margin-bottom: 20px;
      }

      .notice-content {
        font-size: 13px;

        input {
          width: calc(100% - 16px);
          margin: 4px 0;

          &[type="date"],
          &[type="time"] {
            width: 120px;
          }
        }

        .notice-section {
          padding: 12px;
        }
      }
    }
  }
}

@media print {
  .interview-notice-container {
    padding: 0;
    background-color: white;
    min-height: auto;

    .header-actions {
      display: none;
    }

    .interview-notice {
      box-shadow: none;
      padding: 0;
      max-width: 100%;

      .page-title {
        margin-bottom: 20px;

        &::after {
          display: none;
        }
      }

      .notice-content {
        font-size: 12pt;
        line-height: 1.8;

        p {
          margin: 8px 0;
          page-break-inside: avoid;
        }

        input {
          border: none;
          padding: 0;
          min-width: auto;
          background: transparent;
        }

        .notice-section {
          background: none;
          padding: 8px 0;
          border: none;
          page-break-inside: avoid;
        }

        .highlight {
          color: black;
          text-decoration: none;
        }

        .closing-text {
          margin: 16px 0;
        }
      }

      .form-info {
        margin-top: 16px;
        padding-top: 8px;
        border-top: 1px solid #000;
      }
    }
  }
}

.interview-time {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  input[type="date"] {
    width: 140px;
  }

  input[type="time"] {
    width: 100px;
  }

  @media screen and (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;

    input {
      margin: 4px 0;
    }
  }
}
</style>